<template>
  <div>
    <Dialog
      ref="Drawer"
      @close="close"
      :loading="loading"
      @handleSave="handleSave"
      :disabled="disabled"
      :title="title"
      :dialog="dialog"
    >
      <template #content>
        <el-form
          :disabled="disabled"
          :model="ruleForm"
          size="small"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="角色名称"
                prop="name"
              >
                <el-input
                  v-model="ruleForm.name"
                  placeholder="请输入角色名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="角色编码"
                prop="code"
              >
                <el-input
                  v-model="ruleForm.code"
                  placeholder="请输入角色编码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item
                label="角色描述"
                prop="remark"
              >
                <el-input
                  v-model="ruleForm.remark"
                  type='textarea'
                  :rows="5"
                  maxlength="120"
                  show-word-limit
                  placeholder="请输入角色描述"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="12"
              v-if="userInfo.type != 'admin'"
            >
              <el-form-item
                label="工作组"
                prop="workGroup"
              >
                <el-input
                  v-model="ruleForm.workGroup"
                  placeholder="请输入工作组"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="状态"
                prop="isFreeze"
              >
                <el-select
                  class="w100p"
                  v-model="ruleForm.isFreeze"
                  placeholder="请选择状态"
                >
                  <el-option
                    v-for="item in statusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <el-form-item
            
            label="角色类型"
            prop="sysFlag"
          >
            <el-select
              class="w100p"
              v-model="ruleForm.sysFlag"
              placeholder="请选择"
            >
              <el-option
                v-for="item in roleType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item> -->

        </el-form>
      </template>
    </Dialog>
  </div>
</template>
<script>
import Dialog from "@/components/Dialog";
import * as settingApi from "@/api/setting1";
import { getUserInfo } from "@/utils/auth";
export default {
  components: {
    Dialog,
  },
  data() {
    const validateName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入角色名称"));
      } else if (
        value &&
        !/^[A-Za-z0-9]{1,50}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,25}$/.test(value)
      ) {
        callback(new Error("角色名称不超过50个英文字符或25个汉字"));
      } else {
        callback();
      }
    };
    const validateCode = (rule, value, callback) => {
      {
        if (!value) {
          callback(new Error("请输入角色编码"));
        } else if (value.length > 22) {
          callback(new Error("角色编码长度小于22位"));
        } else {
          callback();
        }
      }
    };
    const validateWorkGroup = (rule, value, callback) => {
      if (
        value &&
        !/^[A-Za-z0-9]{1,50}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,25}$/.test(value)
      ) {
        callback(new Error("工作组不超过50个英文字符或25个汉字"));
      } else {
        callback();
      }
    };

    return {
      dialog: false, //弹框
      rules: {
        //form表单非空校验
        name: [
          {
            required: true,
            validator: validateName,
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            validator: validateCode,
            trigger: "blur",
          },
        ],
        workGroup: [
          {
            validator: validateWorkGroup,
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "请输入角色描述",
            trigger: "blur",
          },
        ],
      },
      roleType: [
        // （admin：监管端，hospital：医院端，staff：员工APP）
        // {
        //   label: "医院端",
        //   value: "hospital",
        // },
        {
          label: "医院端",
          value: "hospital",
        },
        {
          label: "员工APP",
          value: "staff",
        },
      ],
      ruleForm: {
        //表单提交
        id: "",
        code: "",
        remark: "",
        name: "",
        isFreeze: 0, //1 禁用 0 启用
        workGroup: "",
      },
      formLabelWidth: "100px", //表单label宽度
      loading: false, //表单提交按钮
      disabled: false,
      title: "",

      statusList: [
        //状态
        {
          label: "正常",
          value: 0,
        },
        {
          label: "禁用",
          value: 1,
        },
      ],
      userInfo: {}, //用户信息
    };
  },
  methods: {
    //弹框关闭
    close() {
      this.dialog = false;
    },
    //初始化弹框
    showModal(_type, _row) {
      this.dialog = true;
      this.ruleForm.id = "";
      this.userInfo = getUserInfo() ? JSON.parse(getUserInfo()) : {};
      this.$nextTick((_) => {
        this.$refs.ruleForm.resetFields();
        if (_type == "edit") {
          this.disabled = false;
          this.ruleForm = JSON.parse(JSON.stringify(_row));
          this.title = "编辑角色";
        } else if (_type == "add") {
          this.title = "新增角色";
          this.disabled = false;
        } else {
          this.title = "查看角色";
          this.disabled = true;
          this.ruleForm = JSON.parse(JSON.stringify(_row));
        }
      });
    },
    //提交保存
    handleSave() {
      this.loading = true;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.userInfo.type == "admin") {
            this.ruleForm.sysFlag = "admin";
          }
          if (this.ruleForm.menuVos) {
            delete this.ruleForm.menuVos;
          }
          settingApi
            .roleSaveOrUpdate(this.ruleForm)
            .then((res) => {
              if (res && res.success) {
                this.loading = false;
                this.dialog = false;
                this.$emit("getDataList");
              } else {
                this.loading = false;
              }
            })
            .catch((e) => {
              this.loading = false;
            });
        } else {
          this.loading = false;
        }
      });
    },
  },
};
</script>
